<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        width: 100%;
        height: 667px;
      }
    </style>
  </head>
  <body>
    <div class="box" width="300px" height="300px">box</div>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/zepto/1.2.0/zepto.js"></script>
  <script src="./zepto/touch.js"></script>
  <script>
    /*  
    document.querySelector(".box").onswipe(function(){
        alert()
    })
    document.querySelector('.box').addEventListener("swipe",function () { 
        alert()
     })
     以上原生写法不会被识别
    */

    // 滑屏
    $(".box").swipe(function () {
      $(this).css({
        fontSize: "30px",
      });
    });
    /* 
    $(document).on("swipeRight",function () { 
        location.assign("./03视频常用的属性和方法.html")
     }) 或
      */
    //  右滑屏打开另一个文件
    $(document).swipeRight(function () {
      // location.assign("./03视频常用的属性和方法.html") 或
      location.href = "./03视频常用的属性和方法.html";
    });

    // 左滑屏
    $(document).swipeLeft(function () {
      // $(".box").css("background","aqua") 或
      $(".box").css({
        background: "aqua",
        fontSize: 20,
      });
    });

    // 上滑屏
    $(document).swipeUp(function () {
      $(".box").html("<span>上滑屏</span>");
    });

    // 下滑屏
    $(document).swipeDown(function () {
      $(".box").css("color", "pink");
      $(".box").html("<span>下滑屏</span>");
    });
  </script>
</html>
